<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rw6-3</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*最小宽度 = left *2 + right  */
            min-width: 600px;
        }
        #left,#right{
            width: 200px;
            height: 200px;
            background: pink;
        }
        #middle{
            height: 200px;
            background: green;
        }

        #left{
            position: absolute;
            left: 0;
            top:0;
            /*透明度 0 - 1*/
            /*opacity: 0.5;*/
        }
        #right{
            position: absolute;
            top:0;
            right: 0;
        }
        #middle{
            margin: 0 200px;
        }
        img{height: 150px;width: 200px}
    </style>
</head>
<body>


<div id="left">
    <img src="rw6photo/1.JPG">
    <p>第一张图片</p>
</div>
<div id="right">
    <img src="rw6photo/2.JPG">
    <p>第二张图片</p>
   </div>
<div id="middle">
    岂曰无衣？七兮。不如子之衣，安且吉兮。
    岂曰无衣？六兮。不如子之衣，安且燠兮。</div>
</body>
</html>